
// /* 一、scss使用变量 */
$highlight-color: #F90; //Compass是Sass的工具库（toolkit）
$basic-border: 1px solid black;
  .nav{
		$width: 100px;
	  border:$basic-border ;
	  color: $highlight-color;
	  width: $width;
  }

/* 二、scss嵌套规则 */
//同层紧跟相邻+
//同层所有的~
//子代选择器>
//&.box{} &:hover &:focus


#content {
	article {
		h1 { 
			color: #333 
		}
		p { 
			margin-bottom: 1.4em
		}
	}
	aside { 
		background-color: #EEE 
	}
	&:hover {
		 color: red 
	}
}
#content aside {
	color: red;
	body.ie & { color: green }//当用户使用ie时为body添加一个类名
}
.container {
	h1, h2, h3 {margin-bottom: .8em}
}
nav, aside {
	a {color: blue}
}
article > section { border: 1px solid #ccc }  //子代section
header + p { font-size: 1.1em } //同层相邻组合选择器+选择header元素后紧跟的p元素
article ~ article { border-top: 1px dashed #ccc }  //同层全体组合选择器~，选择所有跟在article后的同层article元素
article {
	~ article { border-top: 1px dashed #ccc }
	> section { background: #eee }
	dl > {
		dt { color: #333 }
		dd { color: #555 }
	}
	nav + & { margin-top: 0 }
}
nav {
  border: {
  	style: solid;
  	width: 1px;
  	color: #ccc;
  }
}
nav {
	border: 1px solid #ccc {
		left: 0px;
		right: 0px;
	}
}

// /* 三、导入SASS文件 */
@import "./element.scss";
@import "./_night-sky.scss"; //只用于导入的scss
$fancybox-width: 400px !default; //如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
.fancybox {
	width: $fancybox-width;
}
$link-color: blue;
$link-color: red;
a {
	color: $link-color;
}
.blue-theme {
	@import "./_night-sky.scss";
}

/* 四、静默注释 */
body {
	color: #333; // 这种注释内容不会出现在生成的css文件中
	padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
body {
	color /* 这块注释内容不会出现在生成的css中 */: #333;
	padding: 1 /* 这块注释内容也不会出现在生成的css中 */ 0;
}

/* 五、混合器 */
@mixin rounded-corners { //混合器的使用场景，避免滥用。
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;  //混合器主要用于展示性样式的重用，而类名用于语义化样式的重用
	border-radius: 5px;
}
@mixin no-bullets {
	list-style: none;
	li {
	  list-style-image: none;
	  list-style-type: none;
	  margin-left: 0px;
	}
}
@mixin link-colors($normal, $hover, $visited) {
	color: $normal;
	&:hover { color: $hover; }
	&:visited { color: $visited; }
}
@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
.notice {
	background-color: green;
	border: 2px solid #00aa00; //混合器是展示性的描述，用来描述一条css规则应用之后会产生怎样的效果。
	@include rounded-corners; //最重要的区别就是类名是在html文件中应用的，而混合器是在样式表中应用的
}
ul.plain {
	color: #444;
	@include no-bullets;
}
a {
	@include link-colors(blue, red, green);
}
a {
    @include link-colors(
      $normal: blue, //不用在意顺序
      $visited: green,
      $hover: red
  );
}
a{
	@include link-colors(red)
}

// /* 六、使用选择器继承来精简CSS */
.error {
	border: 1px solid red;
	background-color: #fdd;
  }
  .seriousError {
	@extend .error; //通过选择器继承继承样式
	border-width: 3px;
}
.error a{  //应用到.seriousError a
	color: red;
	font-weight: 100; 
  }
  h1.error { //应用到hl.seriousError
	font-size: 1.2rem;
}
.disabled {
	color: gray;
	@extend a;//继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。通常来说这并不会引起什么问题，但是知道这点总没有坏处。
}
.seriousError{
	// @extend .important.error; 如果我希望也继承.important和.error的样式
}
#main .seriousError{
	@extend .error; //只有#main .seriousError才能继承
	//但是如果你不小心，可能会让生成的css中包含大量的选择器复制。避免这种情况出现的最好方法就是不要在css规则中使用后代选择器（比如.foo .bar）去继承css规则。如果你这么做，同时被继承的css规则有通过后代选择器修饰的样式，生成css中的选择器的数量很快就会失控：
}

// /* 七、@function函数：建议自定义函数前添加前缀避免命名冲突 */
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
#sidebar { width: grid-width($n: 5); }
//编译后
#sidebar {width: 240px;}

@function pxtorem($args) {
	@return $args/54/3 * 1rem;
}
@function pxtovh($args) {
	@return $args/19.2 * 1vw;
}

// /* 八、@media */
@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }
    .gridmain {
        width:100%;
    }
    .gridright {
        width:100%;
    }
}
.footer{
	@media screen and (max-width: 1200px) {
		top: pxtorem(-58);
		right: pxtorem(-60);
		width: pxtorem(134);
		height: pxtorem(118);
	}
}

// /*九、@font-face */
//@font-face的作用是从网上下载并使用自定义字体，使页面显示字体不依赖用户的操作系统字体环境。
@font-face {
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf'),
    url('Sansation_Light.eot'); /* IE9 */
}

/* 十一、@keyframes */
@keyframes move{
	0% {
		top: 0px;
	  }
	  25% {
		top: 200px;
	  }
	  50% {
		top: 100px;
	  }
	  75% {
		top: 200px;
	  }
	  100% {
		top: 0px;
	  }
}

@keyframes mymove-2 {
	from {
	  left: 0px;
	}
	to {
	  left: 200px;
	  background-color: blue;
	}
  }